<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <div class="key">
            <div>
                <P>A</P>
                <P>CLAP</P>
                <audio src="sounds/clap.wav"></audio>
            </div>
            <div>
                <P>S</P>
                <P>HHAT</P>
                <audio src="sounds/hihat.wav"></audio>
            </div>
            <div>
                <P>D</P>
                <P>KICK</P>
                <audio src="sounds/kick.wav"></audio>
            </div>
            <div>
                <P>F</P>
                <P>OPENHAT</P>
                <audio src="sounds/openhat.wav"></audio>
            </div>
            <div>
                <P>G</P>
                <P>BOOM</P>
                <audio src="sounds/boom.wav"></audio>
            </div>
            <div>
                <P>H</P>
                <P>RIDE</P>
                <audio src="sounds/ride.wav"></audio>
            </div>
            <div>
                <P>J</P>
                <P>SNARE</P>
                <audio src="sounds/snare.wav"></audio>
            </div>
            <div>
                <P>K</P>
                <P>TOM</P>
                <audio src="sounds/tom.wav"></audio>
            </div>
            <div>
                <P>L</P>
                <P>TINK</P>
                <audio src="sounds/tink.wav"></audio>
            </div>
        </div>
    </div>
    <script>
        let itemList = []
        const key = document.querySelectorAll('.key div p')
        const keyList = Array.from(key)
        function isValue(e, item) {
            if (e.key === item.innerHTML || e.key.toUpperCase() === item.innerHTML) {
                return true
            }
        }
        document.addEventListener('keydown', (e) => {
            keyList.forEach((item, index) => {
                if (isValue(e, item)) {
                    if (itemList.indexOf(item) === -1) {
                        itemList.push(item)
                    }
                    item.parentNode.classList.add('red')
                    item.nextElementSibling.nextElementSibling.currentTime = 0
                    item.nextElementSibling.nextElementSibling.play()
                }
            })
        })
        document.addEventListener('keyup', (e) => {
            itemList.forEach((item) => {
                if (isValue(e, item)) {
                    item.parentNode.classList.remove('red')
                }
            })
        })


        // for (let i = 0; i < key.length; i++) {
        //         if ( e.key === key[i].innerHTML || e.key.toUpperCase() === key[i].innerHTML ) {
        //             if (index.indexOf(i)) {
        //                 index.push(i)
        //             }
        //             key[i].parentNode.classList.add('red')
        //             key[i].nextElementSibling.nextElementSibling.currentTime = 0
        //             key[i].nextElementSibling.nextElementSibling.play()
        //         }
        //     }
    </script>
</body>

</html>